<template>
    <div class="user-page">
        <Navigation title="用户"/>
        <div :useRefresh="useRefresh" :useLoadMore="useLoadMore" v-if="!!user" class="container">
            <div class="content" >
                <Avatar :url="user.avatar_url" :size="80" class="user-avatar"/>
                <p class="user-name">
                    <span>{{user.loginname}}</span>
                    <span class="score">(积分:{{user.score}})</span>
                </p>
            </div>
            <div class="tabs">
                <Header :tabs="tabs" :page="curPage" @change="onPageChange"/>
                <Container :page="curPage">
                    <Content v-for="(List,i) in tabItems" :key="i">
                        <Item :itemList="List"/>
                    </Content>
                </Container>
            </div>
        </div>
        <Loading v-else />
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Component
    } from 'vue-property-decorator';

    import {
        Navigation
    } from './../../components';

    import {
        State,
        Action
    } from 'vuex-class';

    import {
        Profile,
        UserStateContent
    } from './../../state/interface/user';

    import * as types from './../../state/types/user';

    import {
        Avatar,
        TabView
    } from './../../components';

    const {
        Header,
        Content,
        Container
    } = TabView;

    import Item from './components/Item.vue';

    @Component({
        name:`User`,
        components:{
            Avatar,
            Navigation,
            Header,
            Content,
            Container,
            Item:Item
        }
    })
    export default class User extends Vue {
        @Action(types.getUserProfile) getUserProfile!: Function;
        @State(({ user }) => user.profile || {}) profile!:UserStateContent;

        useRefresh:boolean = false;
        useLoadMore:boolean = false;
        curPage:number = 0;

        tabs:Array<any> = [
            {id:`recent_topics`,name:`最近创建的话题`},
            {id:`recent_replies`,name:`最近参与的话题`}
        ]

        get loginName():string {
            const {
                params
            } = this.$route;
            const {
                loginName
            } = params;
            return loginName || ``;
        }

        get user():Profile {
            return this.profile[this.loginName];
        }

        mounted(){
            this.getUserProfile(this.loginName);
        }

        private onPageChange(page:number) {
            this.curPage = page;
        }

        get tabItems() {
            const {
                recent_topics,
                recent_replies
            } = (this.user || {}) as Profile;
            return [recent_topics,recent_replies];
        }
    }
</script>

<style scoped lang="scss">
    .user-page {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 48px;
    }

    .container {
        height: 100%;
        display: flex;;
        flex-direction: column;
    }

    .content {
        display: flex;
        padding-top: 20px;
        flex-direction: column;
    }

    .user-avatar {
        align-self: center;
    }

    .user-name {
        text-align: center;
        font-size: 18px;
        color: #333;
        margin-top: 10px;
        padding-bottom: 20px;
    }

    .tabs {
        flex: 1;
        position: relative;
        padding-top: 48px;
    }

    .score {
        text-align: center;
        color: #666;
        font-size: 12px;
    }
</style>